/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-07-19 16:38:18
 * @LastEditTime : 2023-07-26 08:37:03
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\Workstation001.jsx
 * @Description  :
 */

import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Http } from '../../../Api'
// import './Scss/Workstation001.scss'
import { Tabs, Segmented } from 'antd'
import { TablePage } from './Workstation/TablePage'

// 总览
const One = ({ flowUuid }) => {
    return <div className="Box">总览页面 {flowUuid}</div>
}
// 草稿箱
const Two = ({ flowUuid }) => {
    return (
        <div className="Box">
            <TablePage flowUuid={flowUuid} selectType="Draft" />
        </div>
    )
}
// 待审批
const Thr = ({ flowUuid }) => {
    return (
        <div className="Box">
            <TablePage flowUuid={flowUuid} selectType="Pending" />
        </div>
    )
}
// 审核中
const Fou = ({ flowUuid }) => {
    return (
        <div className="Box">
            <TablePage flowUuid={flowUuid} selectType="Approval" />
        </div>
    )
}
// 待阅读
const Fiv = ({ flowUuid }) => {
    return (
        <div className="Box">
            <TablePage flowUuid={flowUuid} selectType="UnRead" />
        </div>
    )
}

// 已完结
const Six = ({ flowUuid }) => {
    return (
        <div className="Box">
            <TablePage flowUuid={flowUuid} selectType="Finish" />
        </div>
    )
}

const defaultData = 1
const TemplateList = { 1: One, 2: Two, 3: Thr, 4: Fou, 5: Fiv, 6: Six }

const WorkstationBox = ({ flowUuid }) => {
    const [value, setValue] = useState(defaultData)
    const Template = TemplateList[value]
    const [options] = useState([
        { label: '总览', value: 1 },
        { label: '草稿箱', value: 2 },
        { label: '待审核', value: 3 },
        { label: '审核中', value: 4 },
        { label: '待阅读', value: 5 },
        { label: '已完结', value: 6 },
    ])
    useEffect(() => setValue(defaultData), [flowUuid])
    return (
        <div className="WorkstationBox">
            <Segmented block options={options} value={value} onChange={e => setValue(e)} />
            <Template flowUuid={flowUuid} />
        </div>
    )
}

export const Workstation001 = () => {
    const [TableList, setTableList] = useState([])
    const [TableValue, setTableValue] = useState()
    const { runAsync: getFlow } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            const data = list.map(({ uuid, tableName }) => ({ key: uuid, label: tableName }))
            setTableList(data)
            setTableValue(data[0].key)
        },
    })
    useEffect(() => {
        getFlow({ url: 'getFlow', data: { pageSize: 10000 } })
    }, [getFlow])
    return (
        <div className="Workstation001">
            <Tabs activeKey={TableValue} items={TableList} onChange={e => setTableValue(e)} />
            {TableValue && <WorkstationBox flowUuid={TableValue} />}
        </div>
    )
}
